<template>
    <div>
        <div>
            <el-button type="primary">添加新软件</el-button>
            <el-button type="info">添加新版本</el-button>

            <el-button style="margin-left: 50px" type="success">全部启用</el-button>
            <el-button type="warning">全部停用</el-button>
            <el-button type="danger">全部删除</el-button>
            <el-input style="margin-left:50px;width: 200px;" placeholder="搜索软件"></el-input>

        </div>
        <el-collapse style="margin-top: 20px" v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
                <template slot="title">
                    亲朋敲分器
                    <el-button style="margin-left: 10px" type="warning" size="mini" @click.stop="click">修改</el-button>
                    <el-button type="danger" size="mini" @click.stop="click">删除</el-button>
                    <span style="float:right;margin-right: 40px">总共 60 客户端在线</span>
                </template>
                <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="软件名"
                            width="120">
                        <template scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="版本"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="在线人数"
                            width="120">
                        <template scope="scope">100</template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="创建时间"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="更新时间"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button
                                    size="small"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="small"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px ;text-align: right">
                    <el-pagination
                            small
                            layout="prev, pager, next"
                            :total="50">
                    </el-pagination>
                </div>
            </el-collapse-item>
            <el-collapse-item title="反馈 Feedback" name="2">
                <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </el-collapse-item>
            <el-collapse-item title="效率 Efficiency" name="3">
                <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </el-collapse-item>
            <el-collapse-item title="可控 Controllability" name="4">
                <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div style="margin-top: 20px ;text-align: right">
            <el-pagination
                    :total="50">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name:'app',
        data() {
            return {
                activeNames: ['1'],
                tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            };
        },
        methods: {
            click(){
                console.log('sss');
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleChange(){

            }
        }
    }
</script>
